<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目新增</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            background: url("${base}/Desert.jpg");
            background-size: cover;
        }

        #c {
            margin: auto;
            margin-top: 70px;
            opacity: 0.8;
            width: 1000px;
            height: 600px;
        }
        #left {
            width: 700px;
            height: 600px;
            background: rgb(255, 255, 255);
            margin: auto;
            border-radius: 20px;
            padding-top: 10px;
            position: relative;
        }
        input {
            width: 270px;
            border-top-style: hidden;
            border-right-style: hidden;
            border-left-style: hidden;
            background: none;
            margin: 0;
            text-align: center;
        }
        p {
            color: gray;
            height: 30px;
        }
        #file {
            margin-top: 10px;
            color: #616161;
        }
        button {
            margin-top: 50px;
            width: 250px;
            height: 33px;
            border-radius: 20px;
            border: 0px;
            background-color: #c0ca33;
            color: #FFF;
            font-size: 16px;
        }
        span {
            position: absolute;
            left: 30px;
            color: red;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div id="c">
    <div id="left">
        <h1>修改题目</h1>
        <form action="${base}/tac/edit" method="post" enctype="multipart/form-data" onsubmit="return checked()">
            <input type="hidden" name="id" value="${titleOne.id}">
            <p><span id="acterror"></span>题目类型：
                <select name="sid" style="width: 300px;height: 20px">
                    <c:forEach var="t"  items="${titletypes}">
                        <option value="${t.id}">${t.type}</option>
                    </c:forEach>
                </select>
            </p>
            <p><span id="titles"></span>题目：<input id="title" disabled value="${titleOne.title}" type="text" name="title" placeholder="请输入题目"></p>
            <p><span id="pwerror"></span>答案：<input id="answer" type="text" name="answer" value="${titleOne.answer}" placeholder="请输入正确答案"></p>

            <p><span id="unerror"></span>答案解析：<input id="parse" type="text" name="parse" value="${titleOne.parse}"></p>
            <p><span id="pherror"></span>选项A：<input id="ph" type="text" value="${titleOne.choice1}" name="choice1" placeholder="请输入A选项内容"></p>
            <p><span id="pherror1"></span>选项B：<input id="ph1" type="text" value="${titleOne.choice2}" name="choice2" placeholder="请输入B选项内容"></p>
            <p><span id="pherror2"></span>选项C：<input id="ph2" type="text" value="${titleOne.choice3}" name="choice3" placeholder="请输入C选项内容"></p>
            <p><span id="pherror3"></span>选项D：<input id="ph3" type="text" value="${titleOne.choice4}" name="choice4" placeholder="请输入D选项内容"></p>
            <p><span id="acterror1"></span>题目级别：
                <select name="difficulty" style="width: 300px;height: 20px">
                 <c:forEach var="i" begin="1" end="3">
                     <option value="${i}"<c:if test="${titleOne.difficulty}">selected</c:if>>${i}</option>
                 </c:forEach>
                </select>
            </p>
            <button id="sub" type="submit">修改</button>
        </form>
    </div>
</div>
<script src="${base}/jquery-3.0.0.min.js"></script>
<script>
    var isExit = false;
    $("#title").blur(function () {
        $.post("${base}/tac/checkTitle?title="+$("#title").val(),function (result) {
            if(result == "题目不存在可以添加"){
                isExit = false;
                $("#titles").html(result).css("color","green");
            }else {
                isExit = true;
                $("#titles").html(result).css("color","red");
            }
        })
    })
    function checked() {
        if(isExit){
            $("#titles").html("题目已存在").css("color","red");
            return false;
        }
    }


</script>
</body>
</html>


